<template>
    <div>
        <div class="personal">个人资料</div>
        <div class="personal-detail">
            <div class="personal-avatar">
                <a-avatar :src="userInfo.avatarUrl" :size="100"></a-avatar>
                <p style="margin-top: 8px;"><a @click="showModal">更换头像</a></p>
                <a-modal style="text-align: center" v-model="visible" title="上传需要更换的头像" @ok="handleOk">
                    <div v-if="showImg">
                        <a-avatar :size="100" :src="showImgUrl"></a-avatar>
                        <p style="margin-top: 10px"><a @click="againUpload">重新上传</a> </p>
                    </div>
                    <a-upload-dragger
                            v-else
                            name="file"
                            action="http://192.168.109.135:5210/user/userAvatarUpload"
                            @change="handleUploadChange"
                    >
                        <p class="ant-upload-drag-icon">
                            <a-icon type="inbox"/>
                        </p>
                        <p class="ant-upload-text">
                            请选择你需要上传的头像，可以直接拖动到此处进行上传
                        </p>
                    </a-upload-dragger>
                </a-modal>
            </div>
            <div class="personal-info">
                <div class="personal-info-top">
                    <div class="top-one">
                        <div>
                            ID: <span style="margin-right: 20px;">dscn_user_4129719{{ userInfo.id }}</span>
                            <svg-icon icon="iconhuiyuan1"/>
                        </div>
                        <div>
                            <a>个人主页 ></a>
                        </div>
                    </div>
                    <div class="top-two">
                        <span style="margin-right: 20px;">关注 {{ fansAndAttentions.attentionNumber }}</span>
                        <span>粉丝 {{ fansAndAttentions.fanNumber }}</span>
                    </div>
                    <div class="top-three">
                        <span style="margin-right: 20px; color: darkgray">会员到期时间：</span>
                        <span style="color: black">9999-12-31</span>
                    </div>
                </div>
                <div class="personal-info-bottom">
                    <div v-if="isShowPersonalInfo" style="float: left">
                        <div style="color: black;margin-bottom: 15px;">
                            昵称：{{userInfo.nickname}}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            姓名：{{userInfo.realName}}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            性别：{{ userInfo.gender }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            生日：{{ userInfo.birthday | formatDate }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            职位：{{ userInfo.position }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            公司：{{ userInfo.company }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            学历：{{ userInfo.education }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            学校：{{ userInfo.school }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            行业：{{ userInfo.industry }}
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            开始工作时间：{{ userInfo.startWorkingTime | formatDate}}
                        </div>
                        <div class="introduction" style="color: black;margin-bottom: 15px;">
                            简介：{{ userInfo.remark }}
                        </div>
                    </div>
                    <div v-else style="float: left">
                        <div style="color: black;margin-bottom: 15px;">
                            昵称：
                            <a-input v-model="userInfo.nickname" style="width: 200px"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            姓名：
                            <a-input v-model="userInfo.realName" style="width: 200px"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            性别：
                            <a-radio-group :options="genderOptions" v-model="userInfo.gender"
                                           :default-value="userInfo.gender" @change="onGenderChange"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            生日：
                            <a-date-picker :default-value="userInfo.birthday | formatDate" @change="onBirthdayChange"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            职位：
                            <a-input v-model="userInfo.position" style="width: 200px"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            公司：
                            <a-input v-model="userInfo.company" style="width: 200px"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            学历：
                            <a-select v-model="userInfo.education" style="width: 200px" @change="handleEducationChange">
                                <a-select-option :value="item" v-for="(item, index) in educations" :key="index">
                                    {{item}}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            学校：
                            <a-input v-model="userInfo.school" style="width: 200px"/>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            行业：
                            <a-select v-model="userInfo.industry" style="width: 200px" @change="handleEducationChange">
                                <a-select-option :value="item.industryName" v-for="(item, index) in industries"
                                                 :key="index">
                                    {{item.industryName}}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div style="color: black;margin-bottom: 15px;">
                            开始工作时间：
                            <a-date-picker :default-value="userInfo.startWorkingTime | formatDate"
                                           @change="onJobChange"/>
                        </div>
                        <div class="introduction-update" style="color: black;margin-bottom: 15px;">
                            简介：
                            <a-textarea :value="userInfo.remark"></a-textarea>
                        </div>
                        <div>
                            <a-button @click="updateUserInfo" type="danger" style="margin-right: 50px;">确定修改</a-button>
                            <a-button @click="cancelUpdate" type="dashed">取消修改</a-button>
                        </div>
                    </div>
                    <div style="float:right;margin-right: 50px">
                        <span><a @click="toUpdate">修改资料</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {forPersonalInfoCount} from "@/api/user/userFans";
    import {getAllIndustry} from "@/api/user/industry";
    import {updateUserInfo} from "@/api/user/userInfo";
    import {formatDate} from '@/utils/date-format'

    export default {
        name: "personal-information",
        data() {
            return {
                isShowPersonalInfo: 1,
                fansAndAttentions: {},
                gender: '男',
                genderOptions: ['男', '女'],
                education: '本科',
                educations: ['初中', '高中', '专科', '本科', '硕士', '博士', '博士后'],
                industry: '高级工程师',
                industries: [],
                userInfo: {},
                visible: false,
                showImg: false,
                showImgUrl: ''
            }
        },
        mounted() {
            this.init()
        },
        filters: {
            formatDate(time) {
                const date = new Date(time);
                return formatDate(date, "yyyy-MM-dd");
            }
        },
        methods: {
            init() {
                this.userInfo = this.$store.state.userInfo
                console.log(this.userInfo)
                this.forPersonalInfoCount()
                this.getAllIndustry();
            },
            /* 上传文件的回调 */
            handleUploadChange(info) {
                const status = info.file.status;
                if (status !== 'uploading') {
                    this.showImg = true
                    this.showImgUrl = info.file.response.data
                }
                if (status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully.`);
                } else if (status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
            /* 重新选择图片 */
            againUpload() {
                this.showImg = false
            },
            /* 弹出头像上传的modal */
            showModal() {
                this.visible = true;
            },
            /* modal中的确定回调 */
            async handleOk(e) {
                this.userInfo.avatarUrl = this.showImgUrl
                const data = await updateUserInfo(this.userInfo)
                this.$store.commit('UPDATE_USER_INFO', this.userInfo)
                this.visible = false;
            },
            /* 获取所有的行业 */
            async getAllIndustry() {
                const data = await getAllIndustry();
                this.industries = data
            },
            /* 单选框的点击事件 */
            onGenderChange(e) {
                this.gender = e.target.value
            },
            /* 时间选择的回调函数 */
            onBirthdayChange(date, dateString) {
                const d = new Date(dateString)
                this.userInfo.birthday = d
            },
            /* 学历下拉框的回调 */
            handleEducationChange(value) {
            },
            /* 开始上班时间 */
            onJobChange(date, dateString) {
                const d = new Date(dateString)
                this.userInfo.startWorkingTime = d
            },
            /* 跳出修改界面 */
            toUpdate() {
                this.isShowPersonalInfo = 0
            },
            /* 更新用户信息 */
            async updateUserInfo() {
                this.$store.commit('UPDATE_USER_INFO', this.userInfo)
                const data = await updateUserInfo(this.userInfo)
                this.isShowPersonalInfo = 1
                console.log(this.userInfo)
            },
            /* 取消更新 */
            cancelUpdate() {
                this.isShowPersonalInfo = 1
            },
            async forPersonalInfoCount() {
                const userId = this.$store.state.user.id
                const data = await forPersonalInfoCount(userId)
                this.fansAndAttentions = data
            }
        }
    }
</script>

<style scoped>
    .personal {
        height: 90px;
        font-size: 20px;
        font-weight: bold;
        line-height: 90px;
        border-bottom: 1px rgb(224, 224, 224) solid;
        margin-bottom: 10px;
    }

    .personal-avatar {
        text-align: center;
        float: left;
        margin-right: 15px;
    }

    .personal-info-top {
        float: left;
        border-bottom: 1px rgb(224, 224, 224) solid;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .top-one {
        width: 780px;
        display: flex;
        justify-content: space-between;
    }

    .top-two {
        margin-top: 8px;
    }

    .top-three {
        margin-top: 13px;
    }

    .introduction {
        width: 680px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical; /*使用该属性的前提是display:box;*/
        -webkit-line-clamp: 1; /*显示的行数*/
    }
</style>
